<template>
	<view class="discount">
		<view class="discountbox" v-for="item in shopList" :key="item.id">
			<view class="imgword">
				<view class="disimg">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="disword">
					<text>{{item.name}}</text>
					<view class="dismoney">
						<text>￥{{item.subtractMoney}}</text>
						<text style="font-size: 20rpx;font-weight:normal;margin-left:48rpx;margin-top: 6rpx;">满{{item.satisfyMoney}}可用</text>
						<view class="disuse">去使用</view>
					</view>
				</view>
			</view>
			<view class="distime">
				<text >使用期限：{{item.startingTime}} -- {{item.endTime}}</text>
			</view>

			<view class="Disimg">
				<image style="width: 118rpx; height:38rpx;" :src="item.disimg" mode=""></image>
			</view>
		</view>
		
		
		<view class="discountbox2">
			<view class="imgword">
				<view class="disimg">
					<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/market.png" mode=""></image>
				</view>
				<view class="disword">
					<text>小龙坎火锅</text>
					<view class="dismoney">
						<text>￥20</text>
						<text style="font-size: 20rpx;font-weight:normal;margin-left:48rpx;margin-top: 6rpx;">满39可用</text>
						<view class="disuse">
							已失效
						</view>
					</view>
				</view>
			</view>
			<view class="distime">
				<text >使用期限：2020/06/08~2020/06/10</text>
			</view>
		
			<view class="Disimg">
				<image style="width: 118rpx; height:38rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/greydis.png" mode=""></image>
			</view>
		</view>
		
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				shopList: []
			}
		},
		onLoad() {
			// 我的优惠券
			const requestCouon = {
				url: `/api/coupon/list/1`,
				method: "get",
				callBack: (res) => {
					console.log(res.data);
					this.text = 'request success';
					this.shopList = res.data
				}
			}
			this.$http.request(requestCouon)
		}
	}
</script>

<style>
	.discount {
		width: 100%;
		height: 100vh;
		background-color: #F1F1F1;
		padding: 20rpx;
	}

	.discount .discountbox {
		background-color: #FFF5F2;
		width: 710rpx;
		height: 156rpx;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 30rpx;
	}

	.imgword {
		padding: 20rpx;
		display: flex;
	}

	.disimg image {
		width: 80rpx;
		height: 80rpx;
	}

	.disword {
		margin-left: 48rpx;
	}

	.disword text {
		color: #FF6633;
		font-weight: bold;
		font-size: 24rpx;
	}

	.dismoney {
		display: flex;
		flex-direction: row;
		margin-top: 8rpx;
	}

	.disuse {
		width: 112rpx;
		height: 48rpx;
		border: 2rpx solid #FF6633;
		font-size: 24rpx;
		color: #FF6633;
		font-weight: bold;
		line-height: 48rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 409rpx;
		position: absolute;
		top: 48rpx;

	}

	.distime {
		margin-left: 24rpx;
		position: absolute;
		top: 108rpx;
		color: #FF6633;
		font-size: 20rpx;
		
	}

	.Disimg {
		position: absolute;
		top: 124rpx;
		left: 20rpx;
		position: absolute;
		top: -5rpx;
		left: 7rpx;
	}
	
	.discountbox2 {
		background-color: #E1E3E6;
		width: 710rpx;
		height: 156rpx;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.discountbox2 .imgword {
		padding: 20rpx;
		display: flex;
	}
	
	.discountbox2 .imgword .disimg image {
		width: 80rpx;
		height: 80rpx;
	}
	
	.discountbox2 .imgword .disword {
		margin-left: 48rpx;
	}
	
	.discountbox2 .imgword .disword text {
		color: #FFFFFF;
		font-weight: bold;
		font-size: 24rpx;
	}
	
	.discountbox2 .imgword .disword .dismoney {
		display: flex;
		flex-direction: row;
		margin-top: 8rpx;
	}
	
	.discountbox2 .imgword .disword .dismoney .disuse {
		width: 112rpx;
		height: 48rpx;
		border: 2rpx solid #999999;
		font-size: 24rpx;
		color:#FFFFFF;
		font-weight: bold;
		line-height: 48rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 409rpx;
		position: absolute;
		top: 48rpx;
	
	}
	
	.discountbox2 .distime {
		margin-left: 24rpx;
		position: absolute;
		top: 108rpx;
		color:#FFFFFF;
		font-size: 20rpx;
		
	}
	
	.discountbox2 .Disimg {
		position: absolute;
		top: 124rpx;
		left: 20rpx;
		position: absolute;
		top: -5rpx;
		left: 7rpx;
	}

	
	
	
	
</style>
